$intro = null
$("body").on("mouseover", ".user-icon", (e)->
    if $intro
        $intro.remove()
    id = $(e.target).data("id");
    position = {
        x: $(e.target).offset().left + $(e.target).width()
        y: $(e.target).offset().top
    }
    xhr = $.get("/user/#{id}/intro");
    xhr.done( (response) ->
        $intro = $(response)
        $("body").append($intro)
        $intro.css {
            position: "absolute"
        }
        $intro.css {
            top: position.y + "px"
            left: position.x + "px"
        }

        overDialog = false
        $intro.on("mouseenter", (e) ->
            overDialog = true
        )
        $intro.on("mouseleave", (e) ->
            $intro.remove()
            $intro = null
        )
        $(e.target).one "mouseleave", (e) ->
            setTimeout (->
                $intro.remove() if !overDialog && $intro
            ), 50
    )
    xhr.fail( (err, response) ->
        console.log err
    )

)